<ngm-select [displayDensity]="props?.displayDensity"
  [label]="props?.label"
  [placeholder]="props?.placeholder"
  [valueKey]="props?.valueKey ?? 'value'"
  [searchable]="props?.searchable"
  [virtualScroll]="props?.virtualScroll"
  [panelWidth]="props?.panelWidth"
  [displayBehaviour]="props?.displayBehaviour"
  [formControl]="valueFormControl"
  [selectOptions]="selectOptions()"

  [class.ngm-select-error]="error() || formControl.invalid"
>
  @if (formControl.invalid) {
    <formly-validation-message ngmError [field]="field" />
  }
  @if (error()) {
    <span ngmError>{{error()}}</span>
  }
  <div ngmSuffix class="flex items-center">
    <mat-progress-spinner class="hidden" color="primary" mode="indeterminate" diameter="16" />
    @if (props?.info) {
      <i class="ri-information-2-line opacity-50"
        [matTooltip]="props.info"
        matTooltipPosition="above"
      ></i>
    }
  </div>
</ngm-select>